<template>
  <div class="img-detail">
    <my-header myheader="图文详情"></my-header>
    <div>
      <h3 class="img-title">{{infoobj.title}}</h3>
      <p class="img-info">
        <span class="time">{{infoobj.add_time}}</span>
        <span>{{infoobj.click}}次阅读</span>
        <span>哈哈哈</span>
      </p>
    </div>
    <ul>
      <li>
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
      </li>
    </ul>
    <div class="content">{{infoobj.content}}</div>
    <co-mment :detailid="infoobj.id"></co-mment>
  </div>
</template>

<script>
import MyHeader from '@/components/myheader'
import CoMment from '@/components/comment'
import {getthumimages, getimageInfo} from '@/api/imgsApi'
export default {
  data () {
    return {
      slide1: [],
      infoobj: {}
    }
  },

  components: {
    MyHeader,
    CoMment
  },

  computed: {},

  mounted () {
    getthumimages(this.$route.params.id)
      .then(res => {
        // console.log(res)
        if (res.status === 0) {
          res.message.map(itme => {
            itme.msrc = itme.src
            itme.w = 600
            itme.h = 400
          })
          console.log(res.message)
          this.slide1 = res.message
        }
      })
    getimageInfo(this.$route.params.id)
      .then(res => {
        // console.log(res)
        if (res.status === 0) {
          this.infoobj = res.message[0]
        }
      })
  },
  methods: {
    handleClose () {
      console.log('close event')
    }
  }
}

</script>
<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }
  li > div > div{
    display: flex;
    flex-wrap: wrap;
    &>figure{
      width: 33.33%;
    }
  }
</style>

<style lang="scss" scoped>
.img-detail {
  margin-bottom: 55px;

  .img-title {
    font-size: 16px;
    font-weight: bold;
  }
  .img-info {
    display: flex;
    justify-content: space-around;
    color: #26a2ff;
    font-size: 14px;
  }
  .content {
    font-size: 14px;
  }
}
</style>
